<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">日用电量分析</text>
			<text class="page-subtitle">点击日历查看当日用电情况</text>
		</view>

		<!-- 当前选中日期信息 -->
		<view class="date-info" v-if="selectedDate">
			<view class="info-card">
				<view class="date-display">
					<text class="date-icon">📅</text>
					<text class="selected-date-text">{{ formatSelectedDate(selectedDate) }}</text>
				</view>
				<view class="power-summary">
					<text class="total-power">{{ dailyTotal.toLocaleString() }}</text>
					<text class="power-unit">KWH</text>
				</view>
			</view>
		</view>

		<!-- 日历组件 -->
		<view class="calendar-section">
			<view class="calendar-container" v-if="showCalendar">
				<uni-calendar 
					class="uni-calendar--hook" 
					:selected="info.selected" 
					:showMonth="false" 
					@change="change" 
					@monthSwitch="monthSwitch" 
				/>
			</view>
		</view>

		<!-- 用电量统计图表 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">用电结构分析</text>
				<text class="chart-date">{{ selectedDate || '请选择日期' }}</text>
			</view>
			<uni-chart class="chart" :option="opt" />
		</view>


	</view>
</template>



<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	
	export default {
		components: {},
		data() {
			return {
				showCalendar: true,
				selectedDate: null,
				dailyTotal: 1700,
				chartData: {
					production: 1000,
					nonProduction: 400,
					auxiliary: 300
				},
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				opt: {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'item',
						backgroundColor: 'rgba(255,255,255,0.95)',
						borderColor: '#E5E5E5',
						borderWidth: 1,
						textStyle: {
							color: '#333'
						},
						formatter: '{a} <br/>{b}: {c} KWH ({d}%)'
					},
					legend: {
						bottom: 20,
						left: 'center',
						textStyle: {
							color: '#666',
							fontSize: 12
						}
					},
					series: [{
						name: '用电量分布',
						type: 'pie',
						stillShowZeroSum: true,
						radius: ['40%', '70%'],
						center: ['50%', '45%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'outside',
							formatter: '{b}\n{c} KWH\n({d}%)',
							fontSize: 11,
							color: '#666'
						},
						labelLine: {
							show: true,
							length: 15,
							length2: 10
						},
						data: [
							{
								value: 1000,
								name: '生产用电',
								itemStyle: { color: '#007AFF' }
							},
							{
								value: 400,
								name: '非生产用电',
								itemStyle: { color: '#34C759' }
							},
							{
								value: 300,
								name: '辅助生产用电',
								itemStyle: { color: '#FF9500' }
							}
						]
					}]
				}
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date(), -30).fullDate
				this.info.startDate = getDate(new Date(), -60).fullDate
				this.info.endDate = getDate(new Date(), 30).fullDate
				this.info.selected = [
					{
						date: getDate(new Date(), -3).fullDate,
						info: '有数据'
					},
					{
						date: getDate(new Date(), -2).fullDate,
						info: '有数据',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(), -1).fullDate,
						info: '有数据'
					},
					{
						date: getDate(new Date(), 0).fullDate,
						info: '今日'
					}
				]
				
				// 默认选中今天
				const today = getDate(new Date(), 0).fullDate;
				this.selectedDate = today;
				this.generateDataForDate(today);
			}, 1000)
		},
		// 接受参数
		onLoad(option) {
			const title = option.name;
			if (title) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				currentPage.$page.meta.navigationBar.titleText = title;
			}
		},
		methods: {
			// 日历点击事件
			change(e) {
				console.log('选中日期:', e.fulldate)
				this.selectedDate = e.fulldate;
				this.generateDataForDate(e.fulldate);
			},
			
			// 月份切换事件
			monthSwitch(e) {
				console.log('月份切换:', e)
			},
			
			// 根据日期生成数据
			generateDataForDate(dateStr) {
				if (!dateStr) return;
				
				// 根据日期生成不同的随机数据
				const dateObj = new Date(dateStr);
				const dateSeed = dateObj.getFullYear() * 10000 + (dateObj.getMonth() + 1) * 100 + dateObj.getDate();
				
				// 生成三类用电数据
				const production = Math.floor(800 + (dateSeed % 200) * 2 + Math.random() * 400);
				const nonProduction = Math.floor(300 + (dateSeed % 100) * 1.5 + Math.random() * 200);
				const auxiliary = Math.floor(200 + (dateSeed % 80) * 1.2 + Math.random() * 150);
				
				// 更新数据
				this.chartData = {
					production: production,
					nonProduction: nonProduction,
					auxiliary: auxiliary
				};
				
				this.dailyTotal = production + nonProduction + auxiliary;
				
				// 更新饼图数据
				this.opt.series[0].data = [
					{
						value: production,
						name: '生产用电',
						itemStyle: { color: '#007AFF' }
					},
					{
						value: nonProduction,
						name: '非生产用电',
						itemStyle: { color: '#34C759' }
					},
					{
						value: auxiliary,
						name: '辅助生产用电',
						itemStyle: { color: '#FF9500' }
					}
				];
			},
			
			// 格式化选中日期显示
			formatSelectedDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const weekDay = weekDays[date.getDay()];
				return `${year}年${month}月${day}日 ${weekDay}`;
			}
		}
	}
</script>


<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 页面标题 */
	.page-header {
		text-align: center;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.page-title {
		display: block;
		font-size: 40rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 10rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 24rpx;
		color: #666;
		opacity: 0.8;
	}

	/* 当前选中日期信息 */
	.date-info {
		margin-bottom: 30rpx;
	}

	.info-card {
		padding: 30rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.3);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-display {
		display: flex;
		align-items: center;
	}

	.date-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
	}

	.selected-date-text {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}

	.power-summary {
		text-align: right;
	}

	.total-power {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #ffffff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.power-unit {
		display: block;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.7);
		margin-top: 4rpx;
	}

	/* 日历区域 */
	.calendar-section {
		margin-bottom: 30rpx;
	}

	.calendar-container {
		padding: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.uni-calendar--hook {
		border-radius: 12rpx;
		overflow: hidden;
	}

	/* 图表区域 */
	.chart-section {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 30rpx;
	}

	.chart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.chart-date {
		font-size: 24rpx;
		color: #666;
		background: #f3f4f6;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	.chart {
		height: 600rpx;
		width: 100%;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding: 15rpx;
		}
		
		.info-card {
			flex-direction: column;
			text-align: center;
			gap: 20rpx;
		}
		
		.chart {
			height: 500rpx;
		}
	}
</style>